	<script>
// 顶部tab+页面切换
import { defineComponent} from 'vue'
export default defineComponent({
	name: 'WeworkQr'
})
</script>
<script setup>

import {formatDate} from '@/utils'
import { reqClientGroup } from '@/api'
import { customerDataList } from '@/data'
import { deepClone, isEmpty, customerStatus } from '@/utils'
import MyIcon from '@/components/my-icon/index.vue'
import { toRaw } from '@vue/reactivity';
import custormerDrawer from '@/pages/wework/groupManagement/component/custormerDrawer.vue'
import { ref } from 'vue'
const custormerDrawerRef = ref(null)
const total = ref(0)
const pageNo = ref(1)
const queryForm = ref({
	qrId: ''
})
const props = defineProps({
  form: {
    type: Object,
    default: {},
  },
})
const drawer = ref(false)
const rowClick = (row, column, event) => {
	drawer.value = true
	custormerDrawerRef.value.show(row.chat_id)
}

const tableData = ref()

const getData = async(obj)=>{
	let queryForm = {
		external_userid:props.form.external_userid,
		staff_id:props.form.id,
	}
	console.log(props.form)
	const r = await reqClientGroup(queryForm)
	if (r){
		tableData.value = r.data.customerlist
		total.value = r.data.count
	}
	
}
getData()

const multipleTableRef = ref()
const multipleSelection = ref([])
const selectAll = ref(false)

const changeDrawer = (visible) => {
	drawer.value = visible
}
const exportExcel = () => {
	console.log('导出excel')
}
const handleCurrentChange = (val) => {
	pageNo.value = val
	getData()
}
const handleSelectAll = () => {
	multipleTableRef.value.clearSelection()
	if (selectAll.value) {
		tableData.value.forEach((row) => {
			multipleTableRef.value.toggleRowSelection(row, undefined)
		})
	}
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
	if (multipleSelection.value.length == qrDataSetList.value.length) {
		selectAll.value = true
	} else {
		selectAll.value = false
	}
}
const emits = defineEmits(['showDetail'])
defineExpose({
  getData
});
</script>
<template>
<div>
  <el-table class="a-mt20 a-p2016 app-container-radius" ref="multipleTableRef" :data="tableData" style="width:100%"
					>
         <el-table-column fixed label="群名称">
				<template #default="scope">
					<div class="owner-name">
						<img
							class="owner-img"
							src="../../../../../assets/img/img/avatar-room-default.67bead38e751.svg"
							alt=""
						/>
						<span style="margin-left: 10px">{{ scope.row.group_nickname }}</span>
            <!-- name企业微信群聊中设置的名称 -->
					</div>
				</template>
			</el-table-column>
          <el-table-column label="群主" width="180">
				<template #default="scope">
					<div class="owner-name gray-broder">
						<el-icon><UserFilled class="people-icon" /></el-icon>
						<span style="margin-left: 5px">{{ scope.row.staff_name }}</span>
					</div>
				</template>
			</el-table-column>
 <el-table-column label="群人数" prop="group_number" width="180" />

 <el-table-column label="状态" width="180">
				<template #default="scope">
				<el-tag>{{scope.row.status==1?'我已在群聊中':'我不在群聊中' }}</el-tag>
				</template>
			</el-table-column>

      <el-table-column label="操作">
				<template #default="scope">
						<span class="app-primary-font app-pointer" @click="rowClick(scope.row)">详情</span>
					</template>
			
			</el-table-column>
      

        </el-table>   
        <custormerDrawer ref="custormerDrawerRef" :drawer="drawer" @changeDrawer="changeDrawer" />
          	</div>
</template>
<style lang="scss">
@import url('../../../../../style/app-component.scss');
@import '../../../../../style/mixin.scss';
</style>